import React, { Component } from 'react';
import '../../../assets/mycls.css';
class Mycls extends Component {
    state = {
        nameArr: [
            {
                id: 1,
                name: "李元霸",
                weapon: '擂鼓瓮金锤'
            },
            {
                id: 2,
                name: "宇文成都",
                weapon: '凤翅镏金镋'
            },
            {
                id: 3,
                name: "裴元庆",
                weapon: '小银锤'
            }
        ]
    }
    render() {
        const { nameArr } = this.state
        return (
            <div>
                <ul>
                    {
                        nameArr.map((item) => {
                            return <li key={item.id}>{item.name}</li>
                        })
                    }
                </ul>
                <button onClick={() => {
                    nameArr.push({
                        id: nameArr[nameArr.length - 1].id + 1,
                        name: '秦琼'
                    })
                    this.setState({
                        nameArr: nameArr
                    })
                }}>添加英雄</button>
            </div>
        );
    };
    getSnapshotBeforeUpdate() {
        //作用: 获取组件更新前的dom快照
        // 注意: 该函数必须有返回值 ,返回值为更新前的DOM信息,并且返回值作为 componentDidupdate的参数使用
        console.log('getSnapshotBeforeUpdate');
        // 获取ul的高度
        console.log('heigth', document.querySelector('ul').offsetHeight);
        return document.querySelector('ul').offsetHeight
    };
    componentDidUpdate(props, state, Snap) {
        console.log('componentDidUpdate');
        console.log(Snap);
        // 获取元素滚动高度(包括自身高度)
        let ulbox = document.querySelector('ul')
        ulbox.scrollTop = ulbox.scrollHeight - Snap

    }
}

export default Mycls;
